<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

    <table id="myTable" lay-filter="myTable"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon layui-icon-edit"></i> 编辑</button>
        </div>
    </script>



    <script type="text/html" id="rightbarDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--  d 代表表格行的数据对象   {"id":"1111","loginName":"admin1","password":"123","realName":"刘德华1","phone":"1007328601","type":"1"}-->
    <script type="text/html" id="typeTpl">
        {{# if(d.type==1){    }}
            <b style="color:yellow">管理员</b>
        {{#  } else if(d.type==2) {    }}
             <i style="color: blue">操作员</i>
        {{#  }else{   }}
            普通用户
        {{#  }   }}
    </script>

    <hr/>
    <table id="myTable2" lay-filter="myTable2"></table>
</body>
</html>

<!--弹出层的表单代码

private String id;
private String loginName;
private String password;
private String realName;
private String phone;-->
<div id="operatorForm" style="display: none">
    <form class="layui-form"  lay-filter="operatorFormFilter"  >
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-inline">
                <input type="text" name="loginName" lay-verify="loginName"
                       placeholder="请输出登录名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password"  lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认</label>
            <div class="layui-input-inline">
                <input type="password" name="confirmPassWord"  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realName" required  lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required  lay-verify="phone" placeholder="电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addOperatorFrom">保存</button>
            </div>
        </div>
    </form>


</div>


<script src="../layui/layui.js"></script>
<script>
    layui.use(['layer','table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;

        var saveType = '';//用于确定用户点的时添加，还是编辑，在点击表单的保存按钮时，根据saveType调用 控制器的不同方法

        //第一个实例

        table.render({
            id:"operatorTableContainer",
            elem: '#myTable' //渲染id=myTable的表格
            ,height: 312   //表格的默认高度
            ,width:800  //表格的宽度
            ,url: '/operator/list' //数据接口 //访问控制器，获得表格所需的数据
            ,where:{name:'张三',phone:'111'}
            ,page: true   //开启分页 （前端分页，后端分页）
            ,loading:true
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,toolbar: '#toolbarDemo' //表示找到id=toolbarDemo的脚本代码，做为表格的头部工具按钮
            ,cols: [[ //表头
                 {type:'checkbox'}//第一列为复选框列
                 ,{field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'loginName', title: '登录名', width:80,sort:true,edit:'text',style:'color:green'}
                ,{field: 'password', title: '密码', width:80, sort: true,hide:true}
                ,{field: 'realName', title: '姓名', width:80}
                ,{field: 'phone', title: '电话', width: 177}
                ,{fixed: 'right', width:150, align:'center', toolbar: '#rightbarDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,done:function(){
                layer.msg("数据加载完毕");
            }
        });



        table.render({
            elem: '#myTable2' //渲染id=myTable的表格
            ,height: 312   //表格的默认高度
            ,width:800  //表格的宽度
            ,limits:[2,5,10,20,10000]
            ,data:[{"id":"1111","loginName":"admin1","password":"123","realName":"刘德华1","phone":"1007328601","type":"1"},{"id":"2222","loginName":"admin2","password":"123","realName":"刘德华2","phone":"1007328601","type":"2"},{"id":"1","loginName":"admin3","password":"123","realName":"刘德华3","phone":"1007328601","type":"3"},{"id":"1","loginName":"admin4","password":"123","realName":"刘德华4","phone":"1007328601","type":"2"},{"id":"1","loginName":"admin5","password":"123","realName":"刘德华5","phone":"1007328601","type":"2"},{"id":"1","loginName":"admin6","password":"123","realName":"刘德华6","phone":"1007328601","type":"2"}]
            ,page: true   //开启分页 （前端分页，后端分页）
            ,cols: [[ //表头
                {type:'checkbox'}//第一列为复选框列
                ,{field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'loginName', title: '登录名', width:80}
                ,{field: 'password', title: '密码', width:80, sort: true}
                ,{field: 'realName', title: '姓名', width:80}
                ,{field: 'phone', title: '电话', width: 177}
                ,{field: 'type', title: '类型', width: 177, templet: '#typeTpl'}
            ]]
            ,done:function(){
                layer.msg("数据加载完毕");
            }
        });




        //监听表单的提交事件（点击保存按钮的事件）
        //<button class="layui-btn" lay-submit lay-filter="addOperatorFrom">保存</button>
        //submit(addOperatorFrom) 表示找到lay-filter="addOperatorFrom" 的html元素，通过from.on 监听提交
        form.on('submit(addOperatorFrom)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            var url = '';

            if (saveType=='add'){
                url = "/operator/add";
            }else if (saveType=='edit'){
                url = "/operator/edit";
            }
            //异步请求,把表单数据提交到后端控制器
            //jquery 的异步请求方法  $.get(url,{param},callback,'json');
            // 第四个参数为json时，jquery的get方法会把 classback对应函数的 serverData值 转换成js对
            $.get(url,data.field,function(serverData){
                //serverData就是服务端返回的数据 也就是JsonUtil转换成json格式字符串的数据
                //{"code":0,"msg":"保存成功","data":null}
                console.log("服务 端返回的数据为:");
                console.log(serverData);
                if (serverData.code==0){
                    //重载表格数据(刷新表格数据)
                    table.reload("operatorTableContainer");//重载表格
                }else{
                    layer.msg(serverData.msg);
                }
            },'json');
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



        form.verify({
            loginName: function(value, item){ //value：表单的值、item：表单的DOM对象
                var regex =/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
                if(! regex.test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        //
        //toolbar(myTable)  表示监听 lay-filter="myTable"的表格的头部工具栏的点击事件
        table.on('toolbar(myTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);//获得选中行的数据

            console.log(checkStatus);


            console.log("lay-event的值为:"+obj.event)
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    saveType ='add';
                    //清空表单数据
                    form.val("operatorFormFilter",{phone:' ', realName:' ', password:' ',confirmPassWord:' ',loginName:' '});
                    layer.open({
                            type:1,
                            content:$("#operatorForm"),
                            area: ['500px', '400px'],
                            shade: [0.5, '#393D49']})
                    break;
                case 'delete':
                    layer.msg('删除');
                    layer.confirm('真的删除行么', function(index){

                        layer.close(index);
                        //向服务端发送删除指令，删除后再重新加载一次表格实现刷新

                    });
                    break;
                case 'update':
                    layer.msg('编辑');
                    saveType = 'edit';
                    if (checkStatus.data.length!=1){
                        layer.msg("请选择一行要编辑的数据")
                    }else{
                        //获得表格中的选中行数据
                        var rowData = checkStatus.data[0];//因只能选中一行数据，可以把data中的第一个元素值 做为当前选中行的值
                        console.log("-----------------------------");
                        console.log(rowData);
                        //  lay-filter="operatorFormFilter"
                        form.val("operatorFormFilter",rowData);  //operatorFormFilter 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        //给表单赋值元素赋值

                        layer.open({
                            type:1,
                            content:$("#operatorForm"),
                            area: ['500px', '400px'],
                            shade: [0.5, '#393D49']});


                    }

                    break;
            };
        });






        //监听工具条
        table.on('tool(myTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

             if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something


            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });
</script>